<template>
    <div class="plot-view">
        <div class="left">

            <CommonCard class="card">
                <template #title>
                    <div>武汉各区出行人口统计</div>
                </template>
                <!-- v - bind="config"的意思是将config对象中的所有属性展开并绑定到ColumnChart组件对应的属性上。例如，如果config对象是{ color: 'red', fontSize: '16px' }，那么v - bind="config"等价于:color="config.color"和:fontSize="config.fontSize"。 -->
                <ColumnChart :data="districtPeople" v-bind="config" class="chart" />
            </CommonCard>

            <CommonCard class="card">
                <template #title>
                    <div>武汉各区公交线路统计</div>
                </template>
                <RoseChart :data="busData" v-bind="busConfig" class="chart" />
            </CommonCard>
        </div>

        <div class="right">

            <CommonCard class="card">
                <template #title>
                    <div>武汉三镇人口统计</div>
                </template>
                <PieChart :data="peopleData" v-bind="peopleConfig" class="chart" />
            </CommonCard>

            <CommonCard class="card">
                <template #title> 武汉三甲医院 </template>
                <div class="box">
                    <div class="item" v-for="item in hospital" :key="item.title">
                        <h5>{{ item.title }}</h5>
                        <div class="img">
                            <img :src="item.src" :height="item.size" :width="item.size" />
                        </div>
                    </div>
                </div>
            </CommonCard>

            <CommonCard class="card">
                <template #title> 武汉市高校学生统计 </template>
                <div class="box">
                    <div class="item" v-for="item in school" :key="item.title">
                        <h5>{{ item.title }}</h5>
                        <div class="img">
                            <img :src="item.src" :height="item.size" :width="item.size" />
                        </div>
                    </div>
                </div>
            </CommonCard>

        </div>
    </div>
</template>

<script setup>
import CommonCard from '@/components/CommonCard.vue'
// import { ColumnChart, RoseChart, PieChart } from '@opd/g2plot-vue'
import { districtPeople, config } from '@/Mock/districtPeople'
import { busData, config as busConfig } from '@/Mock/bus'
import { peopleData, config as peopleConfig } from '@/Mock/people'
const hospital = [
    {
        title: '医院30家',
        src: '/icons/医院.png',
        size: 65,
    },
    {
        title: '门诊部300个',
        src: '/icons/门诊.png',
        size: 40,
    },
    {
        title: '病床3000张',
        src: '/icons/病床.png',
        size: 50,
    },
]
const school = [
    {
        title: '高校130家',
        src: '/icons/学校.png',
        size: 40,
    },
    {
        title: '在校大学生100万',
        src: '/icons/学生.png',
        size: 40,
    },
]
</script>

<style lang="scss" scoped>
.plot-view {
    .left {
        position: absolute;
        top: 80px;
        left: 40px;
    }

    .right {
        position: absolute;
        top: 80px;
        right: 20px;
    }

    .card {
        margin-bottom: 20px;
        position: relative;
    }

    .chart {
        width: 300px;
        height: 160px;
        position: relative;
    }

    .chart1 {
        width: 300px;
        height: 150px;
        position: relative;
    }

    .box {
        width: 100%;
        height: 70px;
        display: flex;
        justify-content: space-around;
    }

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 10px;
    }

    .item .img {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>